<template>
    <div class="addProd">
        <div class="box flex-b">
            <div class="left">
                <div class="prod-title flex-a">
                    <div class="basic">手动入库</div>
                    <el-button type="warning" style="padding:12px 50px" class="btn-plain" @click="back">返回上一页</el-button>
                </div>
                <div class="prod-content">
                    <el-form ref="form" :model="form" class="input">
                        <el-form-item>
                            <el-input prefix-icon="el-icon-search" v-model="form.name" style="width:350px"
                                placeholder="请输入商品名称/条形码后按Enter键添加商品" clearable></el-input>
                            <el-button type="warning" class="btn" @click="selectGoods">选择商品</el-button>
                        </el-form-item>
                        <div class="stock-total">入库总数量：<span>0</span> 入库总价：<span>0.00</span></div>
                    </el-form>
                    <el-table v-loading="loading" :data="tableData" class="input">
                        <el-table-column label="商品图片" align="center" prop="prodNo">
                            <template slot-scope="scope">
                                <img :src="scope.row.url" style="width:50%" alt="">
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" align="center" prop="name" />
                        <el-table-column label="条形码" align="center" prop="no" />
                        <el-table-column label="当前库存" align="center" prop="alert" />
                        <el-table-column label="标准进货价" align="center" prop="retPrice" />
                        <el-table-column label="入库单价" align="center" prop="price">
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.price"  class="input-radius-right" style="width: 80%;">
                                    <template slot="append">元</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="入库数量" align="center" prop="num">
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.num" class="input-radius-right" style="width: 80%;">
                                    <template slot="append">{{ scope.row.unit }}</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="入库小计" align="center" prop="outRemark" /> -->
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <!-- <el-button size="mini" type="text" icon="el-icon-edit"
                                    v-hasPermi="['pet:out:edit']">复制</el-button> -->
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                    v-hasPermi="['pet:out:remove']" @click="remove(scope.row,scope.$index)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList" />
                </div>
            </div>
        </div>
        <!-- 选择商品对话框 -->
        <el-dialog title="选择商品" :visible.sync="open" width="1000px" append-to-body class="center noPadding">
            <el-form ref="queryParams" :model="queryParams" :rules="rules" size="small" :inline="true" class="input">
                <el-form-item>
                    <el-select v-model="queryParams.classN" placeholder="请选择分类">
                        <el-option v-for="item in classList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="queryParams.sub" placeholder="请选择子分类">
                        <el-option v-for="item in subClassList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.name" placeholder="请输入商品名称/品牌/条形码" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button class="btn" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="inList">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="商品图片" align="center" prop="prodNo">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" style="width: 50%;" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" prop="name" />
                <el-table-column label="条形码" align="center" prop="no" />
                <el-table-column label="规格型号" align="center" prop="spetModel" />
                <el-table-column label="系统库存" align="center" prop="alert" />
                <!-- <el-table-column label="平均成本价" align="center" prop="outPice" /> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-sort" @click="selected(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="select-box flex-a flex-b">
                <div>
                    <el-tag v-for="(item, index) in selList" :key="item.id" closable type="warning"
                        @close="delTag(item, index)">
                        {{ item.name }}
                    </el-tag>
                </div>
                <el-button class="btn" type="primary" :disabled="selList.length == 0" @click="submit">提交</el-button>
            </div>
            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />
        </el-dialog>
        <!-- 编辑备注对话框 -->
        <el-dialog title="编辑备注" :visible.sync="remarkDialog" width="500px" append-to-body class="center noPadding">
            <el-input type="textarea" :rows="5" maxlength="200" show-word-limit placeholder="请输入备注" v-model="remark"
                clearable></el-input>
            <span slot="footer" class="dialog-footer" style="position: relative;top: 20px;">
                <el-button class="btn-plain" style="padding:12px 70px" @click="remarkDialog = false">取消</el-button>
                <el-button type="primary" class="btn" style="padding:12px 70px" @click="remarkDialog = false">保存</el-button>
            </span>
        </el-dialog>
        <div class="submit-foot flex-a flex-b">
            <div class="flex-a">
                <el-button class="btn-disable" disabled style="padding:12px 40px" type="primary">清空</el-button>
                <span class="line"></span>
                <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">备注<br />未填写备注</div>
                    <div>未填写备注</div>
                </el-tooltip>
            </div>
            <div class="flex-a" style="width:52%">
                <el-button class="btn-plain" style="padding:12px 40px" type="primary"
                    @click="remarkDialog = true">编辑备注</el-button>
                <span class="line"></span>
                <el-select v-model="type" placeholder="请选择入库类型" class="input">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker v-model="rkDate" type="date" placeholder="选择日期" class="input" value-format="yyyy-MM-dd"
                    style="margin: 0 10px;">
                </el-date-picker>
                <el-button class="btn" style="padding:12px 40px;" type="primary" @click="submitIn">提交入库</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { listProdInfo } from "@/api/pet/prodInfo";
import { addInfo } from "@/api/pet/inbound";
export default {
    name: "addProd",
    components: {

    },
    data() {
        return {
            open: false,
            remarkDialog: false,
            form: {
            },
            rules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
            },
            type: '',
            remark: '',
            rkDate: '',
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            loading: false,
            // 总条数
            total: 0,
            // 商品出库表格数据
            tableData: [],
            inList: [],
            selList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            subClassList: [],
            classList: [
                {
                    value: 0,
                    label: '药品'
                },
                {
                    value: 1,
                    label: '食品'
                },
                {
                    value: 3,
                    label: '其他'
                },
                {
                    value: 4,
                    label: '用品'
                },
            ],
            typeList: [
                {
                    value: 0,
                    label: '采购入库'
                },
                {
                    value: 1,
                    label: '其他入库'
                },
            ]
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        /** 查询商品信息列表 */
        getList() {
            this.loading = true;
            listProdInfo(this.queryParams).then(response => {
                this.inList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 返回上一页
        back() {
            this.$router.push({ path: '/stock/in' })
        },
        // 选择商品
        selectGoods() {
            this.open = true
            this.getList();
        },
        //选择
        selected(row) {
            let that = this
            let list = that.selList
            let has=list.findIndex(item=>{
                return item.id==row.id
            })
            if(has==-1){
                list.push(row)
            }
            that.selList = list
        },
        //提交
        submit() {
            this.tableData = this.selList
            this.open = false
        },
        //移除
        remove(row,index){
            this.tableData.splice(index,1)
        },
        //关闭标签
        delTag(item, index) {
            this.selList.splice(index, 1)
        },
        //表单提交
        onSubmit() {

        },
        // 提交入库
        submitIn() {
            addInfo(Object.assign({}, { type: this.type, remark: this.remark, rkDate: this.rkDate, list: JSON.stringify(this.tableData) })).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.back()
                }
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        //表头样式
        tableHeaderStyle({ row, rowIndex }) {
            if (rowIndex === 0) {
                return 'grey-back';
            }
            return '';
        },
        //提交表单
        submitForm() {

        },
        //自定义表头
        renderHeader(h, { column, $index }) {
            return $index == 1 ?
                h('div', [
                    h('p', '*'),
                    h('span', column.label),
                ])
                : h('div', [
                    h('span', column.label),
                    h(
                        'el-tooltip',
                        {
                            props: {
                                effect: 'dark',
                                content: $index == 5 ? `进行该服务所需的时长，用于推算预约时间段` : $index == 6 ? '服务结账时商品将作为赠品结账，将同步库存数据' : '',
                                placement: 'top',
                            },
                        },
                        [
                            h('i', {
                                class: 'el-icon-question',
                                style: 'font-size:16px;margin-left:5px;',
                            }),
                        ]
                    ),
                ])
        },
    }
};
</script>
<style scoped lang="scss">
.box {
    position: relative;

    .left {
        width: 100%;
    }

    .prod-title {
        .basic {
            font-size: 18px;
            color: #333336;
            font-weight: 700;
            margin-right: 30px;

            span {
                color: #409eff;
                font-size: 12px;
                font-weight: normal;
                margin: 0 20px 0 5px;
            }
        }
    }

    .prod-content {
        margin-top: 20px;

        div {
            margin-bottom: 15px;

            .mr {
                margin-right: 10px;
            }

            p {
                color: #000000;
                font-size: 14px;

                span {
                    color: #b3b3b3;
                    font-size: 12px;
                }
            }

            .el-input {
                width: 240px;
            }

            .select {
                margin-left: 10px;
                width: 80px;
            }

            .el-textarea {
                width: 500px;
            }

            .el-button.btn {
                margin-left: 10px;
            }

            .tip {
                display: inline-block;
                font-size: 12px;
                color: #333336;
                margin-left: 5px;

                span {
                    color: #409eff;
                }

                span:hover {
                    cursor: pointer;
                }
            }

        }

        .flex {
            p {
                margin-top: 0 !important;
            }
        }

        .suggest {
            span {
                color: rgb(245, 108, 108);
                font-size: 12px;
            }
        }

        .table {
            margin-left: 130px;

            .el-input {
                width: 120px !important;
            }

            .el-textarea {
                width: 150px !important;
            }

            div {
                color: #409eff;
            }

            .switch {
                div {
                    margin: 0;
                }

                span {
                    display: inline-block;
                    font-size: 14px;
                    color: #606266;
                    width: 110px;
                    text-align: left;
                    box-sizing: border-box;
                }
            }
        }
    }
}

.submit-foot {
    position: fixed;
    bottom: 20px;
    background-color: #fff;
    width: 100%;
    height: 60px;
    z-index: 77;
    padding-left: 20px;
    margin-left: -18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 6px 0 6px rgba(0, 0, 0, .12);
    line-height: 60px;
    margin-bottom: -20px;

    .line {
        display: inline-block;
        width: 1px;
        height: 20px;
        background: #d9d9d9;
        margin: 0 20px;
    }
}

.select-box {
    margin: 15px 0 0;
    padding: 0 10px 10px 20px;
    min-height: 82px;
    overflow-y: auto;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;

    .el-tag {
        margin-right: 10px;
    }

    div {
        width: 90%;
    }

    .el-button {
        width: 10%;
    }
}
</style>
<style lang="scss" scoped>
.stock-total {
    font-size: 14px;
    color: #926a61;
    margin-bottom: 10px;

    span {
        color: #e93f45;
        font-weight: 700;
    }
}
</style>